<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true;operataType = 'save'" style="margin-bottom: 20px;">
            添加轮播图
        </el-button>
        <el-dialog title="轮播图信息" :visible.sync="dialogFormVisible" @close="handleClose">
        <el-form :model="dataItem">
            <el-form-item label="图片" >
                <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <el-image
                    style="width: 100px; height: 100px"
                    v-if="dataItem.url" :src="dataItem.url">
                </el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="序号" >
                <el-input-number v-model="dataItem.sequence_num"  label="序号"></el-input-number>    
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 数据表格 -->
      <el-table
        border
        stripe
        :data="tableData"
        max-height="500"
        style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" width="180">
          <template slot-scope="scope">
              <span >{{ scope.row.id }}</span>
          </template>
      </el-table-column>
      <el-table-column label="图片地址" >
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.url"
                ></el-image>
          </template>
      </el-table-column>
      <el-table-column label="排序" width="160">
        <template slot-scope="scope">
            <span >{{ scope.row.sequence_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <el-pagination
        style="margin-top: 20px;"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size = "pageSize"
        :current-page ="current"
        @current-change="load">
    </el-pagination>
    </div>
</template>
<script>
    export default {
    name: "RotManageView",
    data() {
        return {
            tableData: [],
            dataItem:{id:'',url:'',sequence_num:0},//数据
            total:0,//总数
            pageSize:10,//每页行数
            current:0,//当前页数
            dialogFormVisible:false, //控制对话框的显示
        }
    },
    methods:{
        //加载函数
        load(current){
            this.current = current
                this.$http.post('carouse?action=page', this.$qs.stringify({ 
                    pageSize: this.pageSize,
                    currentPage: this.current
                })).then(resp => {
                    //数据绑定
                    if(resp.data.data){
                        this.total = resp.data.data.total
                        this.tableData = resp.data.data.records
                    }
                })
        },
        // 编辑
        handleEdit(index, row) {
            this.operataType = 'update';
            //显示对话框，绑定数据
            this.dialogFormVisible = true;
            //进行深克隆 row-->Strign-->json
            this.dataItem = JSON.parse(JSON.stringify(row));
            this.dataItem.id = '';
        },
        //保存数据操作
        handleSave(){
            if(this.operataType == 'save'){
                //添加操作
                console.log('save user')
                this.$http.post('/carouse?action=save',this.$qs.stringify(this.dataItem))
                    .then(resp => {
                        console.log('save user',resp.data)
                        if(resp.data.data == true){
                            this.load(this.current);
                        }
                    })
            }else{
                //更新操作
                 this.$http.post('/carouse?action=update',this.$qs.stringify(this.dataItem))
                    .then(resp => {
                        console.log('update user',resp.data)
                        if(resp.data.data == true){
                            this.load(this.current);
                        }
                    })
            }
            this.dialogFormVisible = false
        },
        handleDelete(index, row) {
            this.$confirm('是否确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$http.post('/carouse?action=delete&id=' + row.id).then(resp =>{
                        if(resp.data.data == true){
                            this.load(this.current);
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
        },
        //对话框关闭
        handleClose(){
            this.dataItem = {id:'',url:'',sequence_num:0}
            this.operataType = ''
        },
        handleAvatarSuccess(res, file) {
            console.log('upload',res.data)
            this.dataItem.url = res.data
        }
    },
    //页面挂载钩子
    mounted(){
        this.load(1)
    }
}
</script>